<template>
    <common-card title="今日订单" :value="numberFormat(orderToday)">
        <div ref="lineChartRef" style="width:100%;height:100%;"></div>
        <template #footer>
            <span>昨日订单量</span>
            <span class="emphasis">￥{{ numberFormat(orderLastDay) }}</span>
        </template>
    </common-card>
</template>

<script lang="ts">
import CommonCard from './CommonCard.vue'
export default {
    name: 'TodayOrders',
    components: {
        CommonCard
    }
}
</script>

<script lang="ts" setup>
import { ref, onMounted, computed, watch } from 'vue'
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
const { numberFormat, moneyFormat } = useFormat()
let myChart: EChartsType
const reportDataStore = useReportDataStore()

// 定义一个ref 关联到页面中的ref标签上面
const lineChartRef = ref()
let chart: EChartsType


// 使用计算属性来获取对应的数据值
// A. 今日订单
const orderToday = computed(() => reportDataStore.reportData.orderToday)
// B. 昨日订单
const orderLastDay = computed(() => reportDataStore.reportData.orderLastDay)
// C. 订单趋势 订单动态
const orderTrend = computed(() => reportDataStore.reportData.orderTrend)
// D. X轴数据
const orderUserTrendAxis = computed(() => reportDataStore.reportData.orderUserTrendAxis)
const getOption = () => {
    return {
        xAxis: {
            boundaryGap: false, // 两侧不留空白
            //     data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] // x轴数据列表
            // },
            data: orderUserTrendAxis.value

        },
        yAxis: {
            // 不显示Y轴的数值
            show: false
        },
        series: [
            {
                name: '实时订单数',
                type: 'line',
                // 列表数据
                // data: orderTrend.value, 
                // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
                data: orderTrend.value,
                // 线条光滑
                smooth: true,
                // 区域的样式
                areaStyle: {
                    color: 'purple'
                },
                // 折线点的样式
                itemStyle: {
                    opacity: 0
                },
                // 线的样式
                lineStyle: {
                    opacity: 0
                }
            }
        ],
        // 图表在坐标中显示的位置
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
        },
        // 显示提示
        tooltip: {
            trigger: 'axis',
            confine: true
        }
    }
}
//1. 当页面组件挂载完毕的时候，才要使用数据生成对应的图形
onMounted(() => {
    chart = echarts.init(lineChartRef.value)// lineChartRef.value存着对应的div标签对象
    // chart.setOption(getOption())
    // 当浏览器宽度发生变化的时候，图表也要发生变化
    window.addEventListener('resize', () => {
        chart && chart.resize()
    })
})

// 2. 添加监视 当数据变化了，也就是数据回来了之后再渲染列表
//  数据是从store仓库中获取来的，这个过程是异步的，需要添加监视 来知悉数据的变化
watch(orderToday, () => {
    chart.setOption(getOption())
})
</script>

<style>
</style>